<!-- 任务领取列表 -->
<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true" :isrefresh="true">
			<block style="color: #777777;font-size: 32rpx;" slot="content">消息中心</block>
		</cu-custom>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in navs"
					:key="index" @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</view>
		</scroll-view>
		<view v-if="!isHaveTask">
			<view v-if="!dataEmpty" :style="{'height':scrollHeight+'px'}" style="overflow: hidden;">
				<movable-refresh ref="movableRefresh" :scrollHeight="scrollHeight" :noMore="noMore" :showGoTop="true"
					@refresh="refresh" @loadMore="loadMore" @="scrollTop">
					<view>
						<view class="content" v-for="(item,index) in list" :key="index">
							<view class="pd" @click="checkItem(item)">
								<text class="title">{{ item.noticeName||'暂无通知名称' }}</text>
								<text>{{item.readTime==null?"未读":"已读"}}</text>

								<view class="list-box">
								<p class="list-info">内容：</p>
								<p class="list-title" style="flex: 1;">{{ item.noticeContent }}</p>
							</view>

							<view class="list-box">
								<p class="list-info">通知时间：</p>
								<p class="list-title">{{ item.addTime }}</p>
							</view>

							<view class="list-box">
								<p class="list-info">状态：</p>
								<p class="list-title">{{item.feedbackStatus | noticeFeedback}}</p>
							</view>
							</view>
						</view>
					</view>
				</movable-refresh>
			</view>
			<view v-if="dataEmpty" class="empty">
				<p>暂无数据</p>
			</view>
		</view>

		<view v-if="isHaveTask" style="color: #777777;margin: 40rpx auto;display: flex;justify-content: center;">
			<text>已领取过任务</text>
		</view>
		<message />
	</view>
</template>

<script>
	import movableRefresh from '@/components/zyq-movableRefresh/zyq-movableRefresh.vue'
	export default {
		components: {
			movableRefresh
		},
		onLoad() {
			if(!this.mark) {
				return
			}
			this.mark = false
			let system = uni.getSystemInfoSync()
			this.scrollHeight = system.windowHeight - system.statusBarHeight - 50
			this.refresh()
		},
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0,
				navs: ['全部', '未读消息', '已读消息'],
				list: [],
				scrollHeight: 300,
				noMore: false,
				pageNum: 1,
				pageSize: 5,
				dataEmpty: false,
				isHaveTask: false,
				mark: true
			}
		},
		methods: {
			checkItem(val) {
				let app = getApp()
				if (val.readed == null || val.readed == 0) {
					app.globalData.request({
						url: 'wx/notice/updateReadStatus',
						data: {ucId: val.ucId}
					}).then(function(res) {
						
					}).catch(function(e) {
					
					})
				}
				uni.navigateTo({
					url: '/pages/notice/info?ucId=' + val.ucId
				});
			},
			inputEnter() {
				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i]) {
						this.list[i] = this.list[i].filter(value => value.name !== keys);
					}
				}

			},
			tabSelect(e) {
				if(!this.mark) {
					return
				}
				this.mark = false
				this.dataEmpty = false
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				if (!this.isHaveTask) {
					this.refresh()
				}
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			scrollTop(scrollTop) {
				this.scrollTop = scrollTop
			},
			refresh() {
				this.pageNum = 1
				let that = this
				that.noMore = false
				that.list = []
				// 封装参数
				let params = {
					"pageNum": that.pageNum,
					"pageSize": that.pageSize
				}
				if (that.TabCur == 1) {
					params.feedbackStatus = 0
				}
				if (that.TabCur == 2) {
					params.feedbackStatus = 1
				}
				// 请求数据
				let app = getApp()
				app.globalData.request({
					url: 'wx/notice/getInNoticeInfoPage',
					data: params
				}).then(function(res) {

					let datas = res.data.data.list
					let recors = []
					for (let i = 0; i < datas.length; i++) {
						recors.push(datas[i])
					}
					that.list = recors
					that.pageNum++
					if (res.data.data.pages === 1) {
						that.noMore = true
					}

					if (that.list.length == 0) {
						that.dataEmpty = true
					} else {
						that.dataEmpty = false
					}
					that.mark = true
				}).catch(function(e) {
					that.mark = true
					uni.showToast({
						title: "请稍后再试",
						icon: 'none'
					})
				})


			},
			loadMore() {
				if (this.noMore) {
					return
				}

				let list = this.list
				let that = this
				if (that.pageNum) {

				}
				// 封装参数
				let params = {
					"pageNum": that.pageNum,
					"pageSize": that.pageSize
				}
				if (that.TabCur == 1) {
					params.feedbackStatus = 0
				}
				if (that.TabCur == 2) {
					params.feedbackStatus = 1
				}
				// 请求数据
				let app = getApp()
				app.globalData.request({
					url: 'wx/notice/getInNoticeInfoPage',
					data: params
				}).then(function(res) {
					let datas = res.data.data.list
					for (let i = 0; i < datas.length; i++) {
						list.push(datas[i])
					}
					that.list = list


					that.pageNum++
					if (res.data.data.pages === that.pageNum) {
						that.noMore = true
					}

					if (that.$refs.movableRefresh) {
						let that_ = that
						setTimeout(function() {
							that_.$refs.movableRefresh.endLoad() //刷新结束
						}, 1000)
					}
				}).catch(function(e) {

				})
			},
			see_detail(ucId) {
				let that = this
				let app = getApp()
				app.globalData.request({
					url: 'wx/taskmanage/taskReceive',
					data: {
						"ucId": ucId
					}
				}).then(function(res) {
					uni.showToast({
						title: "任务领取成功",
						icon: 'success'
					})
					uni.navigateBack({
						delta: 2,
						success: () => {
							let page = getCurrentPages().pop()
							if (!page) {
								return;
							} else {
								let option = {
									type: 'refreshPage'
								}
								page.onShow(option)
							}
						}
					})
				}).catch(function(e) {

				})
			}
		}
	}
</script>

<style scoped>
	.pd {
		background-color: #FFFFFF;
		margin: 20rpx 0;
		padding: 20rpx 0;
		position: relative;
	}

	.pd text {
		display: flex;
		margin-left: 20rpx;
		font-size: 24rpx;
		/* color: #151515; */
		letter-spacing: 0.39px;
		line-height: 50rpx;
	}

	.pd .title {
		font-size: 32rpx;
		color: #333333;
	}

	.pd .address {
		position: relative;
	}

	.pd .my-btn {
		position: absolute;
		top: 16px;
		right: 16px;
	}
</style>
